<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!--引入样式-->
    <link rel="stylesheet" type="text/css" href="../css/cart1111.css" />
    <script type="text/javascript" src="../js/cart1111.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <!--导航栏开始-->
    <div class="nav">

        <div class="fir">
            <ul class="nav_ul1">
                <li>
                    <i class="iconfont">&#xe644;</i>
                    <a href="index.html">京东首页</a>
                </li>
                <li>
                    <i class="iconfont">&#xe62a;</i>
                    <select>

                        <option>海外</option>
                        <option>港澳</option>
                        <option>大陆</option>
                    </select>
                </li>
            </ul>


            <ul class="nav_ul2">
                <li>
                    <a href="https://order.jd.com/center/list.action">我的订单</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://home.jd.com/">我的京东</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://vip.jd.com/">京东会员</a>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://b.jd.com/">企业采购</a>

                </li>
                <li>
                    <span>|</span>
                    <select>
                        <option>客户服务</option>
                        <option>客户</option>
                        <option>商户</option>

                    </select>

                </li>
                <li>
                    <span>|</span>
                    <select>
                        <option>网站导航</option>
                        <option>特殊主题</option>
                        <option>行业频道</option>
                        <option>生活服务</option>
                        <option>更多精彩</option>
                    </select>

                </li>
                <li>
                    <span>|</span>
                    <a href="https://app.jd.com/">手机京东</a>
                </li>

            </ul>

        </div>


    </div>
    <!--导航栏结束-->
    <!--搜索框开始-->
    <div class="search">
        <div class="fir">

            <img style="width: 100px;" src="../img/JDlogo.gif" />

            <div class="search_div">

                <input type="text" class="search_text" />
                <button class="search_bt">搜索</button>
            </div>

        </div>

    </div>

    <!--搜索框结束-->

    <!--标题栏开始-->
    <div class="title fir">

        <h3>全部商品</h3>
        <div class="title_1">
            <i>配送至：</i>
            <select>
                <option>海外</option>
                <option>大陆</option>
                <option>港澳</option>
            </select>
        </div>

    </div>
    <!--标题栏结束-->

    <!--显示栏开始-->
    <div class="typs fir">
        <ul>
            <li>
                <input type="checkbox" name="fav" onclick="checkTest1(this),checkTest2()" />
            </li>
            <li>全选</li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>



    <!--显示栏结束-->
    <!--空白开始-->
   
    <!--空白结束-->
    <!--商品展示栏开始-->
    <div class="check fir">
        <ul class="check_ul1">
            <li>
                <input style="width: 100px;" type="checkbox" name="fav" onclick="checkTest1(this),checkTest2()" />

            </li>
            <li>
                全选
            </li>
            <li>
                <a href="javascript:void(0)" onclick="checkTest5(),checkTest2()">删除选中的商品</a>
            </li>
            <li>
                <a href="">移入关注</a>
            </li>
            <li>
                <a href=""><b>清理购物车</b></a>
            </li>
        </ul>

        <ul class="check_ul2">
            <li class="zj1">总价：</li>
            <li class="zj2" id="zongj">0</li>
            <li>
                <button><a href="">去结算</a></button>
            </li>
        </ul>
    </div>
   
   
    <div class="info fir">

    </div>
    <!-- <div class="info fir">
        <ul>
            <li class="info_1">
                <input type="checkbox" name="fav" onclick="checkTest2()" />
            </li>
            <li class="info_2">
                <img src="img/0f96fe7f6a8596a0.jpg" width="100px" />
            </li>
            <li class="info_3">
                <i class="info_i">京品手机</i>荣耀20青春版

            </li>
            <li class="info_4">
                冰岛幻境

            </li>
            <li class="info_5">
                ￥1299.00
            </li>
            <li class="info_6">
                <button class="bu1" onclick="checkTest3(this,1),checkTest2()">-</button>
            </li>
            <li class="info_7">
                <input type="text" value="1" />
            </li>
            <li class="info_8">
                <button class="bu2" onclick="checkTest3(this),checkTest2()">+</button>
            </li>
            <li class="info_9">
                <b>￥1299.00</b>
            </li>
            <li class="info_10">
                <a href="javascript:void(0)" onclick="checkTest4(this),checkTest2()">删除</a>

                <br />
                移入关注
            </li>
        </ul>
    </div> -->
    
    <!--商品展示栏结束-->
    <!--结算栏开始-->
    
    
   
    <!--结算栏结束-->

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
<script>


    let cartObjArray = null;//记录  购物车列表的状态

    let uid = localStorage.getItem('id')
    console.log(uid)


    loadCartList()


    // 购物车列表 
    async function loadCartList() {

        let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php"
        let { data } = await axios.get(cartListAPI, { params: { id: uid } })
        console.log(data);
        cartObjArray = data.data;
        updateUl()

    }


    //WithCartObjArray
    function updateUl() {
        console.log(11)
        cartObjArray
        let cartLiArray = cartObjArray.map(pObj => `
        <div class="info fir">
        <ul >
        <li class="info_1">
                <input type="checkbox" name="fav" onclick="checkTest2()" />
            </li>
            <li class="info_2">
                <img src="${pObj.pimg}" width="100px" />
            </li>
            <li class="info_3">
                <i class="info_i">京品手机</i>${pObj.pname}

            </li>
            <li class="info_4">
                冰岛幻境

            </li>
            <li class="info_5">
                ${pObj.pprice}
            </li>
            <li class="info_6">
                <button class="bu1" onclick="checkTest3(this,1),checkTest2()">-</button>
            </li>
            <li class="info_7">
                <input type="text" value="${pObj.pnum}" />
            </li>
            <li class="info_8">
                <button class="bu2" onclick="checkTest3(this),checkTest2()">+</button>
            </li>
            <li class="info_9">
                <b>￥${pObj.pprice}</b>
            </li>
            <li class="info_10">
                <input class="delbtn" type="button" value="删除" data-pid="${pObj.pid}">

                <br />
                移入关注
            </li>
          
         </ul >
      </div>
      <br>
    `);

        let list = document.querySelector('.info ');
        list.innerHTML = cartLiArray.join('');
        
        /*  */
        let delBtns = document.querySelectorAll(".delbtn")
    console.log(delBtns)
    delBtns.forEach((btn, i) => {
                btn.onclick = async () => {
                    //cartDeleteAPI
                    let pid = btn.getAttribute("data-pid");
                    let cartDeleteAPI="http://jx.xuzhixiang.top/ap/api/cart-delete.php"
                    let { data } = await axios.get(cartDeleteAPI, { params: { pid, uid } })
                    console.log(data);

                    // 页面变   
                    // 局部变量  dom remove 
                    // btn.parentNode.remove()   

                    // 刷新列表-》 数组中元素删除cartObjArray， updateUl

                    // cartObjArray 中id位置 pid 的元素删除了
                    // cartObjArray.splice(i, 1)

                    // 把满足条件的元素 过滤出来
                    cartObjArray = cartObjArray.filter(v => v.pid != pid)
                    updateUl()


                }
            })
    }
    
</script>

</html>
<!-- <li>
            <input type="checkbox" name="" class="single-sel" ${pObj.checked ? 'checked' : ''}>
            <h2>${pObj.pname}</h2>
            <p>${pObj.pprice}</p>
            <input class="sub-btn" type="button" value="-" data-pid="${pObj.pid}">
            <input class="num-ipt" type="text" value="${pObj.pnum}">
            <input class="add-btn" type="button" value="+" data-pid="${pObj.pid}">


            <input class="del-btn" type="button" value="删除" data-pid="${pObj.pid}">


            <p>
                总价 <span class="p-count">${pObj.pnum * pObj.pprice}</span>
            </p>

        </li> -->